<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../css/man_home.css">
    <title>药品生产商</title>
</head>

<body>
    <div id="manBox">
        <div id="header">
            <span id="welcome"> 欢 迎 使 用 药 品 溯 源 系 统 </span>
            <input type="button" class="logoutBtn" value="退出" @click="logout" />
        </div>
        <el-row class="tac">
            <el-col :span="6">
                <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                         active-text-color="#ffd04b">
                    <el-menu-item index="1" @click="change1">
                        <i class="el-icon-document"></i>
                        <span slot="title">药品生产数据</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="change2">
                        <i class="el-icon-document"></i>
                        <span slot="title">药品运输数据</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="change3">
                        <i class="el-icon-s-data"></i>
                        <span slot="title">药品溯源</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="change4">
                        <i class="el-icon-user"></i>
                        <span slot="title">个人中心</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="11" :offset="3">
                <div class="rightPage">
                    <!-- 药品生产数据 -->
                    <el-form ref="form1" label-position="left" :model="form1" label-width="120px" v-show="isShow==1">
                        <el-form-item label="药品名称">
                            <el-col :span="12">
                                <el-input v-model="form1.name"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="药品批号">
                            <el-col :span="12">
                                <el-input v-model="form1.batchNum"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="药品批准文号">
                            <el-col :span="12">
                                <el-input v-model="form1.approvalNum"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="药品溯源编码">
                            <el-col :span="12">
                                <el-input v-model="form1.traceableCode"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="生产日期">
                            <el-col :span="12">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form1.mfd" value-format="timestamp" style="width: 100%;">
                                </el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="有效期至">
                            <el-col :span="12">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form1.exp" value-format="timestamp" style="width: 100%;">
                                </el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="入库时间">
                            <el-col :span="12">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form1.std" value-format="timestamp" style="width: 100%;">
                                </el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="附加信息">
                            <el-col :span="12">
                                <el-input type="textarea" v-model="form1.other"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="9">
                                <el-button @click="cleanForm">清空</el-button>
                            </el-col>
                            <el-button type="primary" @click="onSubmit1">保存</el-button>
                        </el-form-item>
                    </el-form>

                    <!-- 药品运输数据 -->
                    <el-form ref="form2" label-position="left" :model="form2" label-width="120px" v-show="isShow==2">
                        <el-form-item label="药品名称">
                            <el-select v-model="selectForm.drugName" filterable placeholder="请选择药品名称" @change="selectDrug" @change="$forceUpdate()">
                                <el-option v-for="item in form2.name" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="药品生产商名称">
                            <el-col :span="12">
                                <el-input v-model="form2.manName" disabled></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="药品批号">
                            <el-select v-model="selectForm.batchNum" filterable placeholder="请选择药品批号" @change="getCode" @change="$forceUpdate()">
                                <el-option v-for="item in form2.batchNum" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="药品溯源编码">
                            <el-col :span="12">
                                <el-input v-model="form2.traceableCode" disabled></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="出库时间">
                            <el-col :span="12">
                                <el-date-picker type="date" placeholder="选择日期" value-format="timestamp" v-model="form2.ostd"
                                                style="width: 100%;">
                                </el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="买方名称">
                            <el-select v-model="selectForm.buyer" filterable placeholder="请选择买方名称" @change="getCode" @change="$forceUpdate()">
                                <el-option v-for="item in form2.buyer" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="附加信息">
                            <el-col :span="12">
                                <el-input type="textarea" v-model="form2.other"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="3" :offset="9">
                                <el-button type="primary" @click="onSubmit2">保存</el-button>
                            </el-col>
                        </el-form-item>
                    </el-form>

                    <!-- 药品溯源 -->
                    <el-form ref="form3" :model="form3" v-show="isShow==3">
                        <el-form-item>
                            <el-col :span="3">
                                <span>药品溯源编码</span>
                            </el-col>
                            <el-col :span="8">
                                <el-input v-model="form3.traceableCode"></el-input>
                            </el-col>
                            <el-col :span="3" :offset="2">
                                <span>药品名称</span>
                            </el-col>
                            <el-col :span="8">
                                <el-input v-model="form3.name"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="3">
                                <span>药品批号</span>
                            </el-col>
                            <el-col :span="8">
                                <el-input v-model="form3.batchNum"></el-input>
                            </el-col>
                            <el-col :span="3" :offset="2">
                                <span>起始生产日期</span>
                            </el-col>
                            <el-col :span="8">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form3.beginDate" value-format="timestamp" style="width: 100%;">
                                </el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="3">
                                <span>终止生产日期</span>
                            </el-col>
                            <el-col :span="8">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form3.endDate" value-format="timestamp" style="width: 100%;">
                                </el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="3" :offset="19">
                                <el-button @click="cleanForm">清空</el-button>
                            </el-col>
                            <el-col :span="2">
                                <el-button type="success" @click="search">查询</el-button>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-table :data="manTable" border style="width: 100%" max-height="500">
                                <el-table-column fixed  label="序号" width="50">
                                    <template slot-scope="scope">
                                        {{ scope.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="traceableCode" label="药品溯源编码" width="120">
                                </el-table-column>
                                <el-table-column fixed prop="name" label="药品名称" width="120">
                                </el-table-column>
                                <el-table-column prop="batchNum" label="药品批号" width="100">
                                </el-table-column>
                                <el-table-column prop="approvalNum" label="药品批准文号" width="120">
                                </el-table-column>
                                <el-table-column prop="mfd" label="生产日期" width="120">
                                </el-table-column>
                                <el-table-column prop="exp" label="有效期" width="120">
                                </el-table-column>
                                <el-table-column prop="std" label="入库时间" width="120">
                                </el-table-column>
                                <el-table-column prop="other" label="附加信息" width="150">
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                        <el-form-item>
                            <el-table :data="traTable" border style="width: 100%" max-height="500">
                                <el-table-column fixed  label="序号" width="50">
                                    <template slot-scope="scope">
                                        {{ scope.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="traceableCode" label="药品溯源编码" width="120">
                                </el-table-column>
                                </el-table-column>
                                <el-table-column prop="name" label="药品名称" width="120">
                                </el-table-column>
                                <el-table-column prop="manName" label="药品生产商" width="120">
                                </el-table-column>
                                <el-table-column prop="batchNum" label="药品批号" width="100">
                                </el-table-column>
                                <el-table-column prop="ostd" label="出库时间" width="120">
                                </el-table-column>
                                <el-table-column prop="buyer" label="买方名称" width="120">
                                </el-table-column>
                                <el-table-column prop="other" label="附加信息" width="150">
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-form>

                    <!-- 个人中心 -->
                    <el-form ref="form4" :model="form4" v-show="isShow==4">
                        <el-form-item>
                            <el-col :span="4">
                                <span><strong>用户名</strong></span>
                            </el-col>
                            <el-col :span="8">
                                <span>{{ form4.username }}</span>
                            </el-col>
                            <el-col :span="6" :offset="6">
                                <el-button @click="pwdOpen = true">修改密码</el-button>
                                <el-dialog title="修改密码" :visible.sync="pwdOpen">
                                    <el-form :model="pwdForm">
                                        <el-form-item label="原密码" :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-input v-model="pwdForm.oldPwd" autocomplete="off"></el-input>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item label="新密码" :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-input v-model="pwdForm.newPwd" autocomplete="off"></el-input>
                                            </el-col>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="cancelChangePwd">取 消</el-button>
                                        <el-button type="primary" @click="changePwd">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="4">
                                <span><strong>手机号码</strong></span>
                            </el-col>
                            <el-col :span="8">
                                <span>{{ form4.phoneNumber }}</span>
                            </el-col>
                            <el-col :span="6" :offset="6">
                                <el-button @click="phoOpen = true">点击修改</el-button>
                                <el-dialog title="修改手机号码" :visible.sync="phoOpen">
                                    <el-form :model="phoForm">
                                        <el-form-item label="新手机号码" :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-input v-model="phoForm.param" autocomplete="off"></el-input>
                                            </el-col>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="cancelChangePho">取 消</el-button>
                                        <el-button type="primary" @click="changePho">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="4">
                                <span><strong>企业名称</strong></span>
                            </el-col>
                            <el-col :span="8">
                                <span>{{ form4.manName }}</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="4">
                                <span><strong>注册地址</strong></span>
                            </el-col>
                            <el-col :span="16">
                                <span>{{ form4.address }}</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="4">
                                <span><strong>法定代表人</strong></span>
                            </el-col>
                            <el-col :span="8">
                                <span>{{ form4.legal }}</span>
                            </el-col>
                            <el-col :span="6" :offset="6">
                                <el-button @click="legOpen = true">点击修改</el-button>
                                <el-dialog title="修改法定代表人" :visible.sync="legOpen">
                                    <el-form :model="legForm">
                                        <el-form-item label="新法定代表人" :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-input v-model="legForm.param" autocomplete="off"></el-input>
                                            </el-col>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="cancelChangeLegal">取 消</el-button>
                                        <el-button type="primary" @click="changeLegal">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-col :span="4">
                                <span><strong>联系方式</strong></span>
                            </el-col>
                            <el-col :span="8">
                                <span>{{ form4.contact }}</span>
                            </el-col>
                            <el-col :span="6" :offset="6">
                                <el-button @click="conOpen = true">点击修改</el-button>
                                <el-dialog title="修改联系方式" :visible.sync="conOpen">
                                    <el-form :model="conForm">
                                        <el-form-item label="新联系方式" :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-input v-model="conForm.param" autocomplete="off"></el-input>
                                            </el-col>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="cancelChangeContact">取 消</el-button>
                                        <el-button type="primary" @click="changeContact">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../js/man_home.js"></script>
</body>

</html>